<template>
    <!-- 金融小店 -->
    <div class="madp-financial-shop">
        <div v-for="item in menuList" :key="item.id">
            <template v-if="item.status == 1">
                <component :is="componentSort[item.id]" :sort="item.sort" :wxUserId="wxUserId" :wxExternalUserid="wxExternalUserid" :isSharePage="isSharePage"></component>
            </template>
        </div>
    </div>
</template>
<script>
    import * as utils from '@/utils/util';
    import financialShopApi from '@/api/financial-shop';
    import ManagerInfoComponent from '@/components/financial-shop/manager-info';
    import MorningPaperComponent from '@/components/financial-shop/morning-paper';
    import ProductComponent from '@/components/financial-shop/product';
    import LoansComponent from '@/components/financial-shop/loans';
    import DepositComponent from '@/components/financial-shop/deposit';
    import ActivityComponent from '@/components/financial-shop/activity';
    import CreditCardComponent from '@/components/financial-shop/credit-card';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        components: { ManagerInfoComponent, MorningPaperComponent, ProductComponent, LoansComponent, DepositComponent, ActivityComponent, CreditCardComponent },
        mixins: [mxInitWxConfig],
        props: {},
        data() {
            return {
                isSharePage: 0, // 是否为分享的页面
                componentSort: {
                    1: 'ProductComponent',
                    2: 'ActivityComponent',
                    3: 'DepositComponent',
                    4: 'LoansComponent',
                    5: 'CreditCardComponent',
                    6: 'ManagerInfoComponent',
                    7: 'MorningPaperComponent'
                },
                menuList: [],
                needLoad: true
            };
        },
        watch: {
            wxUserId: {
                handler(val) {
                    if (val) {
                        if (this.menuList.length == 0) {
                            this.getMenuSout();
                        }
                    }
                },
                immediate: true
            }
        },
        mounted() {
            if (this.isSharePage == 1) {
                this.behaviorTracking();
            }
        },
        activated() {
            if (this.wxUserId && this.menuList.length == 0) {
                this.getMenuSout();
            }
        },
        methods: {
            // 获取菜单排序
            getMenuSout() {
                financialShopApi.getMenuSort().then((res) => {
                    let list = res.data.data;
                    this.menuList = list.sort((a, b) => a.sort - b.sort);
                });
                this.$sensorsSend('EnterShop', { recommend_id: this.$store.state.vuex_wxUserId });
            },
            // 客户打开小店页面时 进行行为追踪
            behaviorTracking() {
                let params = {
                    wxUserId: this.wxUserId,
                    wxExternalUserid: this.wxExternalUserid,
                    chatId: this.chatId,
                    event: 'shopping',
                    corpId: utils.getSession({ name: 'MadpCorpId' }),
                    tenantId: 1,
                    location: encodeURIComponent(`侧边栏-金融小店-推荐`),
                    url: encodeURIComponent(utils.getPageUrl()),
                    timestr: new Date().getTime()
                };
                financialShopApi.behaviorTracking(params).then((res) => {
                    //
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .madp-financial-shop {
        padding: 16px;
        background: #f9f9f9;
        height: 100%;
        // height: 100vh;
        overflow: hidden;
        overflow-y: scroll;
    }
</style>
